<template>
  <div>
    <Head title="注册" :back="true" ></Head>
    <van-row>
      <van-col :span="24" class="pd10">
           <van-form @submit="onSubmit" ref="form" @failed="onFailed">
              <van-field
                v-model="obj.phone"
                name="phone"
                label="手机号码"
                placeholder="手机号码"
                clearable
                left-icon="phone"
                :rules="[
                  { required: true, message: '请填写手机号码' },
                  {
                    pattern:reg.phone,
                    message:'请输入正确的手机号码'
                  }
                ]"
              />
              <van-field
              v-model="obj.username"
              name="username"
              label="用户昵称"
              placeholder="用户昵称"
              clearable
              left-icon="friends"
              :rules="[
                { required: true, message: '请填写用户昵称' },
              ]"
            />
             <van-field
                v-model="obj.password"
                name="password"
                label="登录密码"
                placeholder="登录密码"
                clearable
                left-icon="lock"
                :type="type"
                :right-icon="type=='password'?'eye':'closed-eye'"
                @click-right-icon="changeType"
                @blur="checkdbpassword"
                :rules="[
                  { required: true, message: '请填写登录密码' },
                  {
                    validator:(val)=>{
                      return reg.pwd.test(val)
                    },
                    message:'请输入6-16位的数字字母组合的密码'
                  }
                ]"
              />
              <van-field
                v-model="obj.dbpassword"
                name="dbpassword"
                label="确认密码"
                placeholder="确认密码"
                clearable
                left-icon="lock"
                :type="type1"
                :right-icon="type1=='password'?'eye':'closed-eye'"
                @click-right-icon="changeType1"
                :rules="[
                  { required: true, message: '请填写确认密码' },
                  {
                    pattern:reg.pwd,
                    message:'请输入6-16位的数字字母组合的密码'
                  },
                  {
                    validator:(val)=>{
                      return val == this.obj.password
                    },
                    message:'二次密码输入不一致'
                  }
                ]"
              />
              <div class="mt10 flex jcsb">
                <span class="c-main" @click="gotoPage('login')" >已经账号,立即登录?</span>
                <span  class="c-green" @click="gotoPage('forgetpass')" >忘记密码</span>
              </div>
              <div class="mt10">
                <van-button v-shuibowen block type="danger" native-type="submit">注册账号</van-button>
              </div>
           </van-form>
      </van-col>
    </van-row>
  </div>
</template>


<script>
export default {
  data(){
    return {
      obj:{

      },
      type:'password',
      type1:'password'
    }
  },
  mounted(){
    // this.$http.finduser()
    // .then(res=>{
    //     // res = response.data 
    // })
  },
  methods:{
    checkdbpassword(){
      if(this.obj.dbpassword){
        this.$refs.form.validate("dbpassword")  // 校验dbpassword
      }
    },
    onFailed(){
        this.$notify({
            message: '请先完善信息',
            color: '#ad0000',
            background: '#ffe1e1',
        });
    },
    onSubmit(value){
      console.log(value)
      this.$http.finduser({
        phone:value.phone
      })
      .then(res=>{
        if(res.length>0){
          this.showerror('手机号码已经被注册,请重新注册')
        }else{
          this.$http.adduser(value)
          .then(res=>{
             this.$notify({type:"success",message:"注册成功"})
             this.$router.push({name:'login',query:{phone:value.phone}})
          })
        }
      })
      // this.$axios.get("/user",{
      //   params:{  // 查询参数  
      //     phone:value.phone
      //   }
      // })
      // .then(res=>{
      //   console.log(res)
      // })
      // this.$axios.post("/user",value)
      // .then(res=>{
      //   console.log(res)
      // })


    },
    changeType(){
      this.type = this.type=='password' ? 'text' :'password'
    },
    changeType1(){
      this.type1 = this.type1=='password' ? 'text' :'password'
    }
  }
}
</script>
